<template>
	<main-container>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div>
				<el-button type="primary" v-auth="'upms:sysmenu:add'" @click="add">
					<el-icon> <ele-Plus /> </el-icon> 新增
				</el-button>
			</div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="getPage"></right-toolbar>
		</div>
		<Form ref="formRef" @initPage="getPage" />
		<el-table
			:data="menuTableData"
			v-loading="loading"
			style="width: 100%"
			row-key="path"
			border
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
		>
			<el-table-column label="菜单名称" show-overflow-tooltip>
				<template #default="scope">
					<SvgIcon v-if="scope.row.type == '0'" :name="scope.row.icon" />
					<span class="ml10">{{ $t(scope.row.name) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型" align="center" width="100">
				<template #default="scope">
					<dict-tag :options="menu_type" :value="scope.row.type"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" align="center" width="100" />
			<el-table-column prop="permission" label="菜单权限" />
			<el-table-column prop="path" label="菜单编码" />
			<el-table-column prop="component" label="菜单路径"></el-table-column>
			<el-table-column prop="applicationKey" label="应用系统">
				<template #default="scope">
					<dict-tag :options="application_key" :value="scope.row.applicationKey"></dict-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="300">
				<template #default="scope">
					<el-button link type="primary" v-auth="'upms:sysmenu:edit'" @click="edit(scope.row)">
						<el-icon> <ele-Edit /> </el-icon>修改
					</el-button>
					<el-button link type="danger" v-auth="'upms:sysmenu:del'" @click="del(scope.row.id)">
						<el-icon> <ele-Delete /> </el-icon>删除
					</el-button>
					<el-button link v-auth="'upms:sysmenu:add'" v-if="scope.row.type == '0'" type="primary" @click="addChildrenMenu(scope.row)">
						<el-icon> <ele-Plus /> </el-icon>
						添加下级菜单
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</main-container>
</template>

<script lang="ts" setup name="systemMenu">
import { defineAsyncComponent, ref, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getList, delObj } from '/@/api/upms/menu';
import { useDict } from '/@/utils/dict';
const Form = defineAsyncComponent(() => import('/@/views/upms/menu//form.vue'));

// 字典
const { application_key, menu_type } = useDict('application_key', 'menu_type');

const formRef = ref();
const state = reactive({
	applicationKeys: [],
});
const showSearch = ref(false);
const menuTableData = ref([]);
const loading = ref();
/**
 * 菜单列表查询
 */
const getPage = async () => {
	loading.value = true;
	await getList()
		.then((response: any) => {
			menuTableData.value = response.data.data;
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 添加下级菜单
 */
const addChildrenMenu = (row: any) => {
	let formData = { parentId: row.id };
	formRef.value.initForm(formData);
};
/**
 * 修改点击事件
 */
const edit = (row: RouteRecordRaw) => {
	formRef.value.initForm(row);
};

/**
 * 新增点击事件
 */
const add = () => {
	formRef.value.initForm();
};

// 删除当前行
const del = (id: string) => {
	ElMessageBox.confirm(`此操作将永久删除该菜单, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			delObj(id)
				.then((response) => {
					ElMessage.success('删除成功');
					getPage();
				})
				.catch(() => {});
		})
		.catch(() => {});
};
getPage();
</script>
